<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title><c:choose><c:when test="${incrConfig.title != null && incrConfig.title != '' }">${incrConfig.title }</c:when><c:otherwise>月月存活动</c:otherwise></c:choose></title>
<script type="text/javascript" src="./js/flexible.js"></script>
<style>
*{
	margin: 0;
	padding: 0;
}
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
li{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}
a{
	text-decoration: none;
	color: #FFF;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix:before,.clearfix:after {
	display: table;
	content: " ";
	line-height: 0;
	width: 100%;
	visibility: hidden;
}

.clearfix:after {
	clear: both;
}
.main-wrap {
	width: 100%;
	background: #279ef4;
	padding: 10px 0;
}
.main-box {
	width: 9.066667rem;
	margin: 0 auto;
	background: #0482d9 url(${incrConfig.mainBgImg}) no-repeat top center;
	background-size: 100%;
	padding-top: 1.27rem;
	padding-bottom: 0.4rem;
	border-radius: 0 0 6px 6px;
} 
.main-con {
	margin: 0 0.28rem;	
	background: #FFF;
/*	min-height: 300px; */
	border-radius: 6px;
	padding: 0.28rem 0.21rem;
	background: #d0ebff;
}
.main-pro {
	padding:	0.2rem 0.32rem;
	margin-bottom: 0.12rem;
	background: #FFF;
	box-shadow: 1px 1px 3px rgba(2,64,107,0.4),-1px -1px 3px rgba(2,64,107,0.4);
}
.flex-left {
	width: 4.0rem;
	height: 1.92rem	
}
.flex-right {
	width: 3.0rem;
	height: 1.04rem;
	background: #279ef4;
	border-radius: 6px;
	line-height: 1.04rem;
	text-align: center;
	color: #FFF;
	font-size: 16px;
}
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.jc-space-between {
	justify-content: space-between;
}
.ai-center {
	align-items: center;
}
.mask{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.6);
 	display: none;
	z-index: 2;
}
.pop_up {
	width: 8.4rem;
	position: fixed;
	left: 50%;
	margin-left: -4.2rem;
	top: 50%;
	background: #FFF;
	z-index: 9;
	border-radius: 8px;
	display: none;
}
.pop_title {
	margin-top: 0.53rem;
	color: #279ef4;
	font-size: 20px;
}
.button {
	width: 2.3rem;
	height: 0.96rem;
	line-height: 0.96rem;
	text-align: center;
	color: #FFF;
	border-radius: 8px;
}
.btn-close, .btn-sure {
	margin: 0.56rem auto 0.75rem;
}
.btn-close{ 
	background: #929393;
}
.btn-sure {
	background: #279ef4;
}
.btn-invest {
	width: 2.84rem;
	height: 0.96rem;
	line-height: 0.96rem;
	background: #279ef4;
	color: #FFF;
	text-align: center;
	margin: 0.75rem auto;
	border-radius: 8px;
}
</style>
</head>
<body>
<c:choose>
	<c:when test="${incrConfig != null && incrConfig != '' }">
		<div class="header" style="text-align: center;"><img src="${incrConfig.headerImg}" /></div>
		<div class="main-wrap">
			<div class="main-box">
				<div class="main-con">
					<c:forEach items="${incrConfig.incrList }" var="config">
						<div class="flex jc-space-between ai-center main-pro">
							<div class="flex-left"><img src="${config.rateImg }" /></div>
							<div class="flex-right btn-receice" defId="${config.defId }">立即领取</div>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
		<div class="footer" style="text-align: center;"><img src="${incrConfig.footerImg}" /></div>
		<div class="mask"></div>
		<div class="pop_up" style="text-align: center;">
			<div class="pop_title">确认领取</div>
			<div style="margin-top: 0.27rem;"><img id="rateImg" src="img/month_025.png" style="width: 4.34rem;"></div>
			<p style="color: #717171;margin-top: 5px;" id="ratetxt">60天以上可以使用</p>
			<div class="flex ">
				<div class="flex-1">
					<div class="button btn-close">不领了</div>
				</div>
				<div class="flex-1">
					<div class="button btn-sure">确认</div>
				</div>
			</div>
		</div>
	</c:when>
	<c:otherwise>
		<div style="text-align: center;">
			<img src="http://laicunba.b0.upaiyun.com/lcb/yemianbucunzai.png" style="width: 90%;" />
		</div>
		<div style="font-size: 20px; text-align: center;">该活动不存在，或已结束...</div>
	</c:otherwise>
</c:choose>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="activity.js"></script>
<script>
$(function(){
	var popupHeight = $(".pop_up").height() / 2;
	$(".pop_up").css({
		marginTop: "-" + popupHeight + 'px'
	});
	
	$(".mask, .btn-close").click(function(){
// 		$(".mask, .pop_up").hide();
		window.location.reload();
	});
	
	$(".btn-receice").click(function() {
		$(".mask, .pop_up").hide();
		$("#rateImg").attr("src","");
		$("#rateImg").attr("defid","");
		$("#ratetxt").text("");
		var defId = $(this).attr("defid");
		var device = '${param.device}';
		var app_token = '${param.app_token}';
		var incrList = '${incrConfig.incrList }';
		var param = {
			t :new Date(),
			app_token:app_token
		};
		$.post("monthly_invest_login_status.htm", param, function(data) {
			if(data.loginStatus == 1) {
				incrList = JSON.parse(incrList);
				var index = parseInt(defId.substr(4));
				$("#rateImg").attr("src", incrList[index - 1].rateImg);
				$("#rateImg").attr("defid", defId);
				$("#ratetxt").text(incrList[index - 1].rateTxt);
				$(".mask, .pop_up").fadeIn();
			} else {
				var location = window.location.href.split("?")[0];
				if(device) {
// 					window.location.href = location + "?device=app&app_view=login";
					window.location.href = location + "?app_view=acc";
				} else {
					window.location.href = "/h5/login.htm?tab=account&returnUrl=" + location;
				}
			}
		}, "json");
	});
	
	var location = window.location.href.split("?")[0];
	var _channel = '${param._channel}';
	var incrList = '${incrConfig.incrList }';
	Activity.ready('${param.app_token}', location.substr(location.length-12, 8), "JOIN_INFO", {
		t:new Date()
	}, function(data){
		if(Activity.conditions.joined("001")){
			$(".btn-receice").click(function() {
				$(".mask, .pop_up").hide();
				$(".pop_up").html("");
				var html = '<div class="pop_title">领取失败</div>' +
							'<div style="color: #717171;font-size: 16px; margin-top: 0.53rem;">抱歉，本月您已领取过</div>' +
							'<div class="btn-invest">立即投资</div>';
				$(".pop_up").html(html);
				$(".mask, .pop_up").fadeIn();
				$(".btn-invest").click(function() {
					window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
				});
			}); 
		} else {
			$(".btn-sure").click(function(){
				var defId = $("#rateImg").attr("defid")?$("#rateImg").attr("defid"):"${incrConfig.incrList[0].defId }";
				Activity.join("001",{
					defid : defId
				}, function(jdata){
					if(jdata.code=="SUCCESS"){
						$(".mask, .pop_up").hide();
						$(".pop_up").html("");
						incrList = JSON.parse(incrList);
						var index = parseInt(defId.substr(4));
						var html = '<div class="pop_title">领取成功</div>' +
									'<div class="pop_title">恭喜获得' + incrList[index - 1].incrRate + '加息券</div>' +
									'<div style="color: #717171;font-size: 16px">请至“我的-红包”中查看</div>' +
									'<div class="btn-invest">立即投资</div>';
						$(".pop_up").html(html);
						$(".mask, .pop_up").fadeIn();
						$(".btn-invest").click(function() {
							window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
						});
					}else if(jdata.code=="token_error"){
						if(!$("#device").val()){
							console.log("h5 login");
							window.location.href="/h5/login.htm?tab=account&returnUrl="+window.location.href;
						}else if(_channel && _channel.toLowerCase().indexOf("appst") >= 0){
							console.log("ios login");
							window.location.href="monthly_invest_"+location.substr(location.length-12, 8)+".htm?app_view=login";
						} else {
							console.log("android login");
							window.location.href="/h5/my_account.htm?app_view=acc";
						}
					}else if(jdata.code=="HAS_NO_CHANGE"){
						$(".mask, .pop_up").hide();
						$(".pop_up").html("");
						var html = '<div class="pop_title">领取失败</div>' +
									'<div style="color: #717171;font-size: 16px; margin-top: 0.53rem;">抱歉，本月您已领取过</div>' +
									'<div class="btn-invest">立即投资</div>';
						$(".pop_up").html(html);
						$(".mask, .pop_up").fadeIn();
						$(".btn-invest").click(function() {
							window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
						});
					}else if(jdata.code=="ACT_TIME_INVALID"){
						$(".mask, .pop_up").hide();
						$(".pop_up").html("");
						var html = '<div class="pop_title">领取失败</div>' +
									'<div style="color: #717171;font-size: 16px; margin-top: 0.53rem;">抱歉，活动未开始</div>' +
									'<div class="btn-invest">立即投资</div>';
						$(".pop_up").html(html);
						$(".mask, .pop_up").fadeIn();
						$(".btn-invest").click(function() {
							window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
						});
					}else{
						console.log(JSON.stringify(jdata));
					}
				});
			});
			
		}
	});
})
</script>
</body>
</html>